<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-20 10:32:00
 * @LastEditTime: 2023-02-16 10:12:49
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 添加备注
 * @Motto: Write the code. Change the world.
-->

<template>
  <a-drawer
    title="添加备注"
    :maskClosable="false"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-form layout="vertical">
      <a-form-item label="备注内容" v-bind="validateInfos.content">
        <a-textarea
          placeholder="请输入备注内容"
          v-model:value="modelRef.content"
          :auto-size="{ minRows: 4 }"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;

export default defineComponent({
  name: "",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, context) {
    const modelRef = reactive({
      content: "",
    });
    const rulesRef = reactive({
      content: [{ required: true, message: "必填项" }],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const closeModal = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      validate().then(() => {
        let params = {
          log_type: "remark",
          contract_id: props.id,
          operate_content: JSON.stringify(modelRef),
          needMsg: true,
        };
        request
          .post("/org", "/contract/createOperateLog", params)
          .then((res) => {
            message.success(res.msg || "保存成功");
            context.emit("success");
          });
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (!val) {
          resetFields();
        }
      }
    );

    return {
      modelRef,
      validateInfos,
      closeModal,
      onSubmit,
    };
  },
});
</script>
